<template>
    <div @click="showInfo">
        <el-card style="cursor: pointer;" :body-style="{ padding: '0px' }" :class="{ 'plant-card': true }">
            <!-- <el-image style="width: 100%;" :src="imgSrc" :preview-src-list="[imgSrc]">
                <div slot="error">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image> -->
            <img :src="imgSrc" class="img" />
            <div style="padding: 14px;">
                <span>{{ ": " + plant.totanyName }}</span>
                <div class="bottom clearfix">
                    <div v-if="(plant.totancyCont.length < 20)">
                        {{ plant.totancyCont }}
                    </div>
                    <div v-else style="cursor: pointer;">
                        {{ contCut }}
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { getPicture } from "@/api/index"
import router from '@/router';
const options = {
    props: ["plant"],
    data() {
        return {
            imgSrc: null
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getImage(this.plant);
        },
        getImage(item) {
            let that = this;
            getPicture(item.pictureUrl).then((resp) => {
                let url = window.URL.createObjectURL(resp.data);
                that.imgSrc = url;
                // console.log(url);
            })
        },
        showInfo() {
            console.log("show info");
            this.$store.commit("setPlant", this.plant);
            localStorage.setItem("plant", JSON.stringify(this.plant));
            router.push("/front/display");
        }
    },
    computed: {
        contCut() {
            return this.plant.totancyCont.replace(this.plant.totancyCont.slice(18), "...");
        }
    }
}

export default options;
</script>

<style>
.plant-card {
    margin: 30px 20px;
    /* text-align: center;
    overflow: hidden; */

}

.img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    cursor: pointer;
}
</style>